<template>
    <div class="newSafe">
        <div class="additem">
            <div class="list">
                <div class="item item1"><i class="iconfont icon-xiangmu"></i>&nbsp;检查项目：</div>
                <select class="item item2 select2" v-model="form.safeCheckcontent">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in itemsList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                </select>
            </div>
            <div class="list">
                <div class="item item1"><i class="iconfont icon-shijian"></i>&nbsp;处理时限：</div>
                <input type="text" style="width:3rem" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="form.timelimit">天
                <div style="flex:0 0 20%"></div>
            </div>

            <div class="list">
                <div class="item item1"><i class="iconfont icon-xitong"></i>&nbsp;系统：</div>
                <select class="item item2 select2" v-model="form.systemId">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in sysList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                </select>
            </div>

            <div class="list" v-if="form.systemId=='S' ||form.systemId==''">
                <div class="item item1"><i class="iconfont icon-quyu"></i>&nbsp;片区：</div>
                <select class="item item2 select2" v-model="form.areaId">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in selAreaList" :value="lst.areaId" :key="lst.value">{{lst.areaName}}</option>
                </select>
            </div>
            <div class="list" v-if="form.systemId!='PROJECT'">
                <div class="item item1"><i class="iconfont icon-icon-"></i>&nbsp;点位：</div>
                <select class="item item2 select2" v-model="form.siteId">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in siteList" :value="lst.siteId" :key="lst.value">{{lst.siteName}}</option>
                </select>
            </div>
            <div class="list" v-if="form.systemId=='PROJECT'">
                <div class="item item1"><i class="iconfont icon-shijian"></i>&nbsp;工程名称：</div>
                <div class="item item2 select2"><input type="text" v-model="form.project" style="width:100%"></div>

            </div>
            <div class="list">
                <div class="item item1"><i class="iconfont icon-xunjian"></i>&nbsp;责任部门：</div>
                <select class="item item2 select2" v-model="form.deptId">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in deptList" :value="lst.deptId" :key="lst.value">{{lst.deptName}}</option>
                </select>
            </div>
            <div class="list">
                <div class="item item1"><i class="iconfont icon-ren"></i>&nbsp;部门负责人：</div>
                <select class="item item2 select2" v-model="form.deptpersonId">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in selPersonList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                </select>
            </div>
            <div class="list">
                <div class="item item1"><i class="iconfont icon-ren"></i>&nbsp;安全员：</div>
                <select class="item item2 select2" v-model="form.personId">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in safepeopleList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                </select>
            </div>
            <div class="list">
                <div class="item item1">反应内容：</div>
            </div>
            <div class="list">
                <textarea name="" id="" cols="40" rows="10" v-model="form.reactcontent" maxlength="80" style="margin-left:3px;margin-top:1px;"></textarea>
            </div>
            <div class="list">
                <div class="item item1">上传图片：</div>
            </div>
            <div class="list postImg">
                <form class="uploadPicForm clearfix" id="uploadPicForm" enctype="multipart/form-data">
                    <div class="img1 clearfix" v-for="(urls, index) in imgs " :key="urls.value">
                        <div :class="{deleteBtn:!isImg}" class="delete clearfix" v-on:click="deleteImg(index)"><i class="iconfont icon-shanchu"></i></div>
                        <img class="img" :src="urls" />
                    </div>
                    <div class="addimg" v-on:click="imgClick()" v-if="this.files.length<3 && isImg">
                        <i class="iconfont icon-jiahao"></i>
                    </div>
                    <input style="float: left;  display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile($event)">
                </form>
            </div>
        </div>
        <button :class="{btnBg:!isImg}" ref="addSafeBtn" type="button" class="btn btn-block btn-primary" @click="addSafe">提交</button>
    </div>
</template>

<script>
import utils from '@/utils'
import {
    getUserInfo,
    setUserInfo,
    logout
} from '@/utils/auth'
export default {
    data() {
        return {
            itemsList: [],
            selDeptList: [],
            selPersonList: [],
            selAreaList: [],
            siteList: [],
            sysList: [],
            safepeopleList: [],
            deptList: [
                { deptId: 15, deptName: '安装分公司' },
                { deptId: 16, deptName: '工程管理部' },
                { deptId: 17, deptName: '思源供水' },
                { deptId: 33, deptName: '广源贸易' },
                { deptId: 37, deptName: '清源污水公司' },
                { deptId: 42, deptName: '净源污水公司' },
                { deptId: 46, deptName: '排水公司' },
            ],
            form: {
                systemId: '',
                areaId: '',
                siteId: '',
                deptId: '',
                personId: '',
                timelimit: '',
                photopath: '',
                reactcontent: '',
                deptpersonId: '',
                safeCheckcontent: '',
                project: '',
                time1: utils.getDate()
            },
            imgs: [],
            files: [],
            fileList: [],
            isImg: true
        }
    },
    mounted() {
        this.getSys()
        this.getItems()
        this.getSafepeople()
        this.getSelPerson()
    },
    watch: {
        fileList() {
            this.form.photopath = "";
            this.fileList.forEach(item => {
                this.form.photopath += (item + ',');
            });
            this.form.photopath = this.form.photopath.substr(
                0,
                this.form.photopath.length - 1
            );
        },
        'form.systemId'() {
            this.form.areaId = ''
            this.form.siteId = ''
            this.form.deptId = ''
            this.form.personId = ''
            this.form.project = ''
            if (this.form.systemId == 'S') {
                this.form.deptId = 17
                this.form.deptpersonId = 67
                this.form.personId = 82
                this.getSelArea()
            }
            if (this.form.systemId == 'W') {
                this.getSiteWs()
            }
            if (this.form.systemId == 'P') {
                this.getSitePs()
                this.form.deptId = 46
                this.form.deptpersonId = 180
                this.form.personId = 191
            }
            if (this.form.systemId == 'PROJECT') {
                this.form.deptId = 16
                this.form.deptpersonId = 42
                this.form.personId = 46
            }
        },
        'form.areaId'() {
            if (this.form.systemId == 'S') {
                this.getselSite()
            }
        },
        'form.siteId'() {
            if (this.form.systemId == 'W') {
                if (this.form.siteId == '32-WC-TZH') {
                    this.form.deptId = 37
                    this.form.deptpersonId = 162
                    this.form.personId = 166
                }
                if (this.form.siteId == '31-WC-CB') {
                    this.form.deptId = 42
                    this.form.deptpersonId = 143
                    this.form.personId = 149
                }
            }
        }
    },
    methods: {
        //删除图片
        deleteImg(index) {
            this.imgs.splice(index, 1);
            this.fileList.splice(index, 1);
        },
        //图片click
        imgClick() {
            document.getElementById("uploadFile").click();
        },
        //图片上传
        readLocalFile(e) {
            let localFile = document.getElementById("uploadFile").files[0];
            if (!localFile) {
                return
            }
            //开关控制
            this.isImg = false
            this.$refs.addSafeBtn.disabled=true
            // console.log(this.$refs.addSafeBtn.disabled)

            // console.log(document.getElementById("uploadFile").files)
            this.files.push(localFile)


            //获取图片base64代码
            var reader = new FileReader();
            var content;
            var current = this;
            content = reader.readAsDataURL(localFile, "UTF-8");

            reader.onload = function (event) {
                content = event.target.result;
                current.imgs.push(content);
            }
            reader.onerror = function (event) {
                alert('error')
            }



            //上传
            var formData = new FormData();
            formData.append('file', this.files[this.files.length - 1]);
            // console.log(formData.get("file"))
            this.$api.safe.uploadUrl(formData).then(res => {
                if (res.success) {
                    this.$refs.addSafeBtn.disabled=false
                    this.$$tip({
                        content: '该图片上传成功！'
                    })
                    this.fileList.push(res.data)
                    this.isImg = true
                }
            }).catch(res => {
                console.log(res)
            });;
        },

        //系统列表
        getSys() {
            this.$api.safe.sys().then(res => {
                if (res.success) {
                    this.sysList = res.data
                }
            });
        },
        //检查项目
        getItems() {
            this.$api.safe.items().then(res => {
                if (res.success) {
                    this.itemsList = res.data
                }
            });
        },
        //责任部门
        getSelDept() {
            this.$api.safe.selDept({
                areaId: this.form.areaId
            }).then(res => {
                if (res.success) {
                    this.selDeptList = res.data
                }
            });
        },
        //部门负责人
        getSelPerson() {
            this.$api.safe.deptpeople().then(res => {
                if (res.success) {
                    this.selPersonList = res.data
                }
            });
        },
        //安全员
        getSafepeople() {
            this.$api.safe.safepeople().then(res => {
                if (res.success) {
                    this.safepeopleList = res.data
                }
            });
        },
        //片区
        getSelArea() {
            this.$api.safe.selArea().then(res => {
                if (res.success) {
                    this.selAreaList = res.data
                }
            });
        },
        //供水点位
        getselSite() {
            this.$api.safe.selSite({
                areaId: this.form.areaId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.siteList = res.data
                }
            });
        },
        //排水点位
        getSitePs() {
            this.$api.safe.sitePs().then(res => {
                if (res.success) {
                    this.siteList = res.data
                }
            });
        },
        //污水点位
        getSiteWs() {
            this.$api.safe.siteWs().then(res => {
                if (res.success) {
                    this.siteList = res.data
                }
            });
        },
        //添加隐患
        addSafe() {
            // console.log(this.form.photopath)
            if (this.form.safeCheckcontent == '') {
                this.$$tip({
                    content: '检查项目不能为空！'
                })
            } else if (this.form.timelimit == '') {
                this.$$tip({
                    content: '处理时限不能为空！'
                })
            } else if (this.form.systemId == '') {
                this.$$tip({
                    content: '系统不能为空！'
                })
            } else {
                if (this.form.systemId != '') {
                    if (this.form.systemId == 'P' || this.form.systemId == 'W') {
                        if (this.form.siteId == '') {
                            this.$$tip({
                                content: '点位不能为空！'
                            })
                        } else if (this.form.reactcontent == '') {
                            this.$$tip({
                                content: '反应内容不能为空！'
                            })
                        } else {
                            this.add()
                        }
                    }
                    if (this.form.systemId == 'PROJECT') {
                        if (this.form.project == '') {
                            this.$$tip({
                                content: '工程名称不能为空！'
                            })
                        } else if (this.form.reactcontent == '') {
                            this.$$tip({
                                content: '反应内容不能为空！'
                            })
                        } else {
                            this.add()
                        }
                    }
                    if (this.form.systemId == 'S') {
                        if (this.form.areaId == '') {
                            this.$$tip({
                                content: '片区不能为空！'
                            })
                        } else if (this.form.siteId == '') {
                            this.$$tip({
                                content: '点位不能为空！'
                            })
                        } else if (this.form.reactcontent == '') {
                            this.$$tip({
                                content: '反应内容不能为空！'
                            })
                        } else {
                            this.add()
                        }
                    }
                }
            }
        },
        add() {
            this.$api.safe.addSafe(this.form).then(res => {
                if (res.success) {
                    this.$$tip({
                        content: '上报成功！'
                    })
                    this.$router.push({ path: "list", query: { token: getUserInfo() } });
                }
            });
        }
    }
}
</script>

<style lang="less">
</style>

